<template>
	<view class="flex-column">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar style="z-index:999;" left-icon="left" :statusBar="true" @clickLeft="gobacks" title="评论"
			:fixed="true"></uni-nav-bar>
		<!-- #endif -->
		<view class="comment-header">
			<image style="width: 100rpx;height: 100rpx;" :src="picHref"></image>
			<view class="username">
				<view class="top">
					<text>{{ username }}</text>
					<uni-icons v-if="!isUser" type="checkbox-filled" color="skyblue" size="20"></uni-icons>
					<view>
						<text class="comtents" :user-select="true">{{ comment }}</text>
					</view>
				</view>
				<view class="bottom font700">{{ times }}</view>
			</view>
		</view>
		<view class="driver"></view>
		<!-- #ifdef  MP-WEIXIN-->
		<ad adpid="1300828862" ad-type="video" :ad-intervals="30" v-if="!isVipExpired" ad-theme="white"></ad>
		<!-- #endif -->
		<view>
			<CommentItem v-if="commentData.length !== 0" v-for="(data, index) in commentData" :key='data.pk' :datas='data'>
			</CommentItem>
		</view>
		<view v-if="commentData.length === 0" style="text-align: center;margin-top: 40rpx;">
			<text>暂无评论,快来发表评论吧!</text>
		</view>
		<!-- <u-loadmore v-if="commentData.length>=12" :status="status" :icon="true" :loading-text="loadingText" :nomore-text="nomoreText" /> -->
		<view class='send-message' :style="{ bottom: inputBottom }">
			<u-input @focus="focusEvent" @blur="blurEvent" :focus="true" :disableDefaultPadding="true" ref="uInput"
				:adjustPosition="false" @confirm="sendMessage" v-model="commentVal" placeholder="添加评论..."
				class='input-message'>
				<template slot="suffix">
					<u-button @click="sendMessage" text="发送" type="success"></u-button>
				</template>
				<template v-if="!isLogin" slot="prefix">
					<u--image :src="userPicHref" width="100rpx" height="100rpx" shape="circle"
						confirmType="send"></u--image>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
import Config from "@/common/config.js"
import CommentItem from "./comment-item.vue"
import {
	getMedias,
	getComment,
	sendComment
} from "@/api/app/api.js"
export default {
	components: {
		CommentItem
	},
	data() {
		return {
			comment: "",
			commentData: [],
			status: 'loadmore',
			loadingText: '努力加载中',
			nomoreText: '实在没有了',
			page: 1,
			edgeId: "",
			commentVal: "",
			times: "",
			inputBottom: 0,
			isFoucs: false,
			isUser: false,
			edgePic: '',
			picHref: '',
			username:"",
		};
	},
	computed: {
		user() {
			return this.$store.getters.getUser;
		},
		// picHref(){
		// 	console.log('this.globalIcon.headPortrait',this.globalIcon.headPortrait)
		// 	return this.isUser ? Config.static_url + this.$store.getters.getUser.avatar : this.globalIcon.headPortrait
		// },
		isLogin() {
			return this.$store.getters.getLogin
		},
		userPicHref() {
			return Config.static_url + this.$store.getters.getUser.avatar
		},
		isVipExpired(){
			console.log('$store.getters.getVipExpired', this.$store.getters.getVipExpired)
			return this.$store.getters.getVipExpired
		}
	},
	methods: {
		blurEvent() {
			this.inputBottom = "0px";
		},
		focusEvent(event) {
			// console.log('键盘高度事件:',event)
			this.inputBottom = event.detail.height + "px";
		},
		async comments(user) {
			// console.log('user', user);
			let comment = {
				mediaId: this.edgeId,
				user_id: this.user.openid,
				text: this.commentVal,
				type: 'comment',
				created_at_utc: Number(String(+new Date()).slice(0, 10)),
				comment_like_count: 0,
				comment_replay_count: 0,
				username: this.user.username,
				state: !this.isUser ? 'success' : 'send',
				isWx: true,
				origin: this.$store.getters.getsysteminfo.uniPlatform,
				user: user,
				isUser: this.isUser
			}
			sendComment(comment).then(res => {
				console.log('res', res)
				this.commentData.unshift(comment);
				wx.showToast({
					title: '评论成功',
					icon: 'success',
					duration: 2000
				});
				this.commentVal = '';
			}).catch(err => {
				console.log('err', err)
				wx.showToast({
					title: '评论失败',
					icon: 'error',
					duration: 1000
				})
			})
		},
		gobacks() {
			uni.navigateBack({})
		},
		async addComment(page) {
			uni.showToast({
				title: '正在加载评论',
				icon: 'loading',
			})
			getComment({
				page: page,
				edgeid: this.edgeId
			}).then(res => {
				console.log(res)
				this.commentData.push(...res.data)
				this.status = "nomore";
				uni.hideToast();
				uni.showToast({
					title: '加载成功',
					icon: 'success',
					duration: 1000
				})
			}).catch(err => {
				console.log(err)
				uni.showToast({
					title: '加载失败',
					icon: 'error',
					duration: 1000
				})
			})
		},
		async sendMessage() {
			// console.log('this.$store.getters.getLogin', this.$store.getters.getLogin);
			this.comments(this.user);
		},
		keyboard(res) {
			// console.log(res);
			this.inputBottom = res.height + "px";
		}
	},

	async onReachBottom() {
		// this.status = "loading"
		let page = this.page = this.page + 1;
		this.addComment(page)
	},
	async onLoad(options) {
		this.edgePic = options.pic;
		this.isUser = options.isUser;
		this.picHref = options.pic;
		console.log(options)
		// if (this.isUser == 'true') {
		// 	this.picHref = Config.static_url + this.$store.getters.getUser.avatar;
		// }
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			success(result) {
				console.log("success", result);
			},
			fail(err) {
				console.log("err", err);
			}
		});
		// #endif
		let chanel = this.getOpenerEventChannel();
		chanel.on('transformData', (data) => {
			console.log(data)
			this.edgeId = data.edgeId;
			// console.log("传输过来的数据",data);
			if (data.comments.length > 0) {
				console.log('开始传输数据', data.comments)
				this.commentData.push(...data.comments);
			} else {
				this.addComment(this.page);
			}
			this.username = data.username
			this.comment = data.comtent;
			console.log("this.comment", this.comment)
			this.times = data.times;
		});
		// #ifndef MP-TOUTIAO
		uni.onKeyboardHeightChange(this.keyboard);
		// #endif
	},
	beforeDestroy() {
		// #ifndef MP-TOUTIAO
		uni.offKeyboardHeightChange(this.keyboard);
		// #endif
	},
}
</script>

<style lang="scss" scoped>
.send-message {
	display: flex;
	position: fixed;
	width: 100%;
	background-color: #fff;

	.input-message {
		flex: 1;
	}
}

.status_bar {
	height: calc(var(--status-bar-height) * 2);
	width: 100%;
}

// --status-bar-height
.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: relative;
	top: var(--status-bar-height);
	z-index: 999;

	.header-title {
		font-weight: 700;
		font-size: 1.2em;
		padding-left: 20rpx;
	}

	.header-icon {
		padding-left: 15rpx;
	}
}

.comtents {
	// float: left;
	font-weight: normal !important;
}

.comment-header {
	display: flex;
	min-height: 120rpx;
	justify-content: flex-start;
	padding: 25rpx 15rpx;
	column-gap: 10rpx;

	image {
		height: 100rpx;
		width: auto;
		aspect-ratio: 1/1;
		border-radius: 100%;
		object-fit: cover;
	}


	.username {
		flex: 1;
		padding: 0 15rpx;
		display: flex;
		flex-direction: column;

		.top {

			text {
				font-weight: 700;
			}

			.authentication {
				height: auto;
				width: 50rpx;
				aspect-ratio: 1/1;
				background-image: url('~@/static/all.png');
				// background-position: buttom 50rpx right 1rpx ;
				background-position: right -50rpx center 10rpx;
			}
		}

	}
}


.comment-list {
	background-color: #fff;
}

.comment-info {
	display: flex;
	border-bottom: 1rpx solid gray;
	padding: 10rpx 0;

	image {
		height: 100%;
		width: auto;
		aspect-ratio: 1/1;
	}
}

.comment-util {
	text {
		margin-right: 10rpx;
	}
}

.comment-tabar {
	height: 1rpx;
	width: 100%;
	background-color: gray;
}
</style>